<template>
  <div>
    <Layout />
    <section class="wrapper">
      <el-form
        class="auto-generate-form"
        ref="form"
        :model="form"
        label-width="80px"
      >
        <el-form-item label="题目类型">
          <el-select v-model="form.type" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="填空题:">
        <el-input v-model="form.typesNum" :min="0" label="填空题:"></el-input>
      </el-form-item>
      <el-form-item label="简答题:">
        <el-input v-model="form.typesNum" :min="0" label="简答题:"></el-input>
      </el-form-item> -->
        <el-form-item v-show="form.type !== 3" label="题目:">
          <el-input v-model="form.title" placeholder="题目"></el-input>
        </el-form-item>
        <el-form-item v-show="form.type === 3" label="题目:">
          <el-input v-model="form.title" placeholder="图片链接"></el-input>
          <!-- <el-upload
            class="upload-demo"
            action=""
            :auto-upload="false"
            :file-list="fileList"
            :on-change="handleFile"
          >
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload> -->
        </el-form-item>
        <!-- <el-form-item label="图片链接:">
          <el-input
            v-model="form.title"
            :min="1"
            :max="10"
            label="图片链接"
          ></el-input>
        </el-form-item> -->
        <el-form-item label="难度:">
          <el-input
            v-model="form.difficulty"
            :min="1"
            :max="10"
            label="难度:"
          ></el-input>
        </el-form-item>
        <el-form-item label="默认分值:">
          <el-input v-model="form.defaultScore" label="默认分值:"></el-input>
        </el-form-item>
        <el-form-item v-show="form.type === 1" label="选项1:">
          <el-input v-model="form.expend[0].text" label="选项1"></el-input>
        </el-form-item>
        <el-form-item v-show="form.type === 1" label="选项2:">
          <el-input v-model="form.expend[1].text" label="选项2"></el-input>
        </el-form-item>
        <el-form-item v-show="form.type === 1" label="选项3:">
          <el-input v-model="form.expend[2].text" label="选项3"></el-input>
        </el-form-item>
        <el-form-item v-show="form.type === 1" label="选项4:">
          <el-input
            v-model="form.expend[3].text"
            :min="1"
            :max="10"
            label="选项4"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">立即创建</el-button>
        </el-form-item>
      </el-form>
      <section class="queryWrapper">
        <div class="queryBox">
          <el-input
            v-model="searchKey"
            placeholder="请输入要搜索的内容"
          ></el-input>
          <el-button type="primary" @click="getTopic">查询</el-button>
        </div>
        <el-table
          :header-cell-style="{
            textAlign: 'center',
          }"
          :cell-style="{
            textAlign: 'center',
          }"
          :data="tableData"
          border
          stripe
          max-height="400"
        >
          <el-table-column prop="id" label="ID"> </el-table-column>
          <el-table-column prop="title" label="题目"> </el-table-column>
          <el-table-column prop="type" label="类型"> </el-table-column>
          <!--      <el-table-column prop="className" label="班级"> </el-table-column>-->
          <el-table-column prop="defaultScore" label="默认分值">
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="250">
            <template #default="scope">
              <el-button @click="handleClick(scope.row)" size="small"
                >编辑</el-button
              >
              <el-button @click="handleShow(scope.row.id)" size="small"
                >查看</el-button
              >
              <el-button
                size="small"
                type="danger"
                @click="deleteClick(scope.row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          v-model:current-page="currentNum"
          v-model:page-size="pageSize"
          :page-sizes="[15, 20, 50]"
          :background="true"
          layout="total, sizes, prev, pager, next"
          :total="total"
          @size-change="(data) => paginationChange(data, 1)"
          @current-change="(data) => paginationChange(data, 2)"
        />
      </section>
      <el-dialog v-model="dialogVisible" width="30%" title="添加试题">
        <!-- <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="科目：">
            <el-select
              v-model="form.subjectId"
              clearable
              placeholder="请选择科目"
            >
              <el-option
                v-for="item in this.subjectList"
                :key="item.subjectId"
                :label="item.subjectName"
                :value="item.subjectId"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="分值：">
            <el-input v-model="form.titleFraction"></el-input>
          </el-form-item>
          <el-form-item label="题型：">
            <el-select
              v-model="form.titleStatus"
              clearable
              placeholder="请选择题目类型"
            >
              <el-option label="单选题" :value="0"></el-option>
              <el-option label="填空题" :value="1"></el-option>
              <el-option label="主观题" :value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="难度：">
            <el-rate v-model="form.titleType" allow-half />
          </el-form-item>
           <el-form-item label="考试班级：">
          <el-select
            v-model="form.classId"
            clearable
            placeholder="请选择班级"
          >
            <el-option
              v-for="(item, index) in this.classList"
              :label="item.className"
              :value="item.classId"
              :key="index"
            >
            </el-option>
          </el-select>
        </el-form-item> -->
        <!-- <el-form-item label="题目：">
            <el-input v-model="form.titleName"></el-input>
          </el-form-item>
          <el-form-item v-show="number === 2" label="答案：">
            <el-input type="textarea" v-model="form.answer"></el-input>
          </el-form-item>
          <div v-show="number === 0">
            <el-form-item label="答案：">
              <el-input v-model="form.answer"></el-input>
            </el-form-item>
            <el-form-item label="选项A：">
              <el-input v-model="form.choice1"></el-input>
            </el-form-item>
            <el-form-item label="选项B：">
              <el-input v-model="form.choice2"></el-input>
            </el-form-item>
            <el-form-item label="选项C：">
              <el-input v-model="form.choice3"></el-input>
            </el-form-item>
            <el-form-item label="选项D：">
              <el-input v-model="form.choice4"></el-input>
            </el-form-item>
          </div>
          <el-form-item v-show="number === 1" label="答案：">
            <el-input v-model="form.answer"></el-input>
          </el-form-item> -->
        <!-- </el-form>  -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="updateQuestions">确 定</el-button>
        </span>
      </el-dialog>
      <el-dialog :visible.sync="dialogSeeVisible" width="30%" title="查看试题">
        <ul>
          <li>题目：{{ currentTopic.title }}</li>
          <ul class="expendWrapper" v-if="currentTopic.expend">
            <li>A. {{ currentTopic.expend[0].text }}</li>
            <li>B. {{ currentTopic.expend[1].text }}</li>
            <li>C. {{ currentTopic.expend[2].text }}</li>
            <li>D. {{ currentTopic.expend[3].text }}</li>
          </ul>
        </ul>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogSeeVisible = false">关 闭</el-button>
          <!-- <el-button type="primary" @click="updateQuestions">确 定</el-button> -->
        </span>
      </el-dialog>
    </section>
  </div>
</template>
<script>
import axios from "axios";
import Layout from "@/layout";
import { getAllTopics } from "@/api/topic";
export default {
  name: "autoGenerate",
  components: { Layout },
  data() {
    return {
      form: {
        createUserId: 0,
        knowledgeId: 0,
        type: 1,
        title: "",
        index: 0,
        defaultScore: 0,
        difficulty: 0,
        expend: [
          {
            index: 0,
            text: "",
          },
          {
            index: 1,
            text: "",
          },
          {
            index: 2,
            text: "",
          },
          {
            index: 3,
            text: "",
          },
        ],
      },
      options: [
        {
          value: 1,
          label: "选择题",
        },
        {
          value: 2,
          label: "填空题",
        },
        {
          value: 3,
          label: "图片题",
        },
      ],
      value: "",
      fileList: [],
      searchKey: "",
      tableData: [],
      currentNum: 1,
      pageSize: 15,
      total: 0,
      dialogVisible: false,
      updateForm: {},
      dialogSeeVisible: false,
      currentTopic: {
        title: "",
        expend: [
          {
            index: 0,
            text: "",
          },
          {
            index: 1,
            text: "",
          },
          {
            index: 2,
            text: "",
          },
          {
            index: 3,
            text: "",
          },
        ],
      },
    };
  },
  methods: {
    handleFile(file) {
      console.log(file);
      let formData = new FormData();
      formData.append("image", file.raw);
      formData.append("fileId", file.name);
      formData.append("initialPreview", "[]");
      formData.append("initialPreviewConfig", "[]");
      formData.append("initialPreviewThumbTags", "[]");
      axios({
        url: "https://locimg.com/upload/upload.html",
        method: "post",
        headers: {
          "Content-Type": "multipart/form-data",
        },
        data: formData,
      }).then((res) => {
        console.log(res);
      });
    },
    paginationChange(data, flag) {
      console.log(data);
      if (flag === 1) this.pageSize = data;
      else this.currentNum = data;
      this.getTopic();
    },
    getTopic() {
      axios({
        url: "https://598c-120-85-135-97.ngrok-free.app/problem/search",
        method: "post",
        headers: {
          "ngrok-skip-browser-warning": "happy",
        },
        data: {
          keywords: this.searchKey,
          page: this.currentNum,
          limit: this.pageSize,
        },
      }).then((res) => {
        console.log(res);
        if (res.data.code === 200) {
          this.tableData = res.data.data.records;
          this.total = res.data.data.total;
        }
      });
      // getAllTopics();
    },
    deleteClick(data) {
      axios({
        url: "https://598c-120-85-135-97.ngrok-free.app/problem/do",
        method: "delete",
        headers: {
          "ngrok-skip-browser-warning": "happy",
        },
        data: {
          id: data,
        },
      }).then((res) => {
        console.log(res);
        if (res.data.code === 200) {
          this.$message.success("删除成功");
          this.getTopic();
        }
      });
    },
    handleClick(data) {
      this.dialogVisible = true;
      console.log(data);
    },
    handleShow(id) {
      axios({
        url: "https://598c-120-85-135-97.ngrok-free.app/problem/id",
        method: "get",
        headers: {
          "ngrok-skip-browser-warning": "happy",
        },
        params: {
          id,
        },
      }).then((res) => {
        if (res.data.code === 200) {
          this.dialogSeeVisible = true;
          this.currentTopic = res.data.data;
        }
      });
    },
    updateQuestions() {},
    onSubmit() {
      axios({
        url: "https://598c-120-85-135-97.ngrok-free.app/problem/do",
        method: "put",
        headers: {
          "ngrok-skip-browser-warning": "happy",
        },
        data: this.form,
      }).then((res) => {
        if (res.data.code === 200) {
          this.$message.success("添加成功！");
        }
      });
      // let _this = this;
      // console.log(autoGenerate);
      // autoGenerate(this.form)
      //   .then((re) => {
      //     console.log(re);
      //     if (re.success) {
      //       _this.$alert(re.message, {
      //         confirmButtonText: "返回首页",
      //         callback: (action) => {
      //           _this.$router.push("/paper");
      //         },
      //       });
      //     } else {
      //       _this.$message.error(re.message);
      //     }
      //   })
      //   .catch((e) => {
      //     _this.$message.error(re.message);
      //   });
    },
  },
  created() {
    this.getTopic();
  },
};
</script>

<style lang="scss" scoped>
li {
  list-style: none;
}
.auto-generate-form {
  padding-top: 50px;
  padding-right: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.expendWrapper {
  li {
    margin: 10px 0;
  }
}
.wrapper {
  display: flex;
  padding-left: 20px;
  .el-form {
    padding-top: 20px;
    width: 300px;
    margin-right: 50px;
  }
  .queryWrapper {
    position: relative;
    flex: 1;
    .queryBox {
      display: flex;
      align-items: center;
    }
    .el-input {
      width: 200px;
      margin: 20px 0;
      margin-right: 10px;
    }
    .el-button {
      height: 32px;
    }
    .el-pagination {
      position: absolute;
      right: 20px;
      bottom: 20px;
    }
  }
}
</style>
